import React, { Component } from 'react'
import { Cell, Checkbox, Flex, Typography, Dialog, SubmitBar } from 'react-vant';
import { Add, DeleteO } from '@react-vant/icons';
import Ctx from './store/Ctx';

export default class Home extends Component {

  //接收上下文
  static contextType = Ctx

  //计算全选和反选
  get All() {
    if (this.context.accountlist.length == 0) {
      return false
    }
    return this.context.accountlist.every(item => {
      return item.sed
    })
  }

  //计算已选择的钱数
  get total() {
    let { accountlist } = this.context
    return accountlist.reduce((p, n) => {
      if (n.sed) {
        return p + n.total*1
      }
      return p
    }, 0)
  }

  //总支出
  get zcT() {
    return this.context.accountlist.reduce((p, n) => {
      if (n.type == 0) {
        return p + n.total*1
      }
      return p
    }, 0)
  }

  //总收入
  get srT() {
    return this.context.accountlist.reduce((p, n) => {
      if (n.type == 1) {
        return p + n.total*1
      }
      return p
    }, 0)
  }


  render() {
    //console.log(this.context);
    let { accountlist, changeSed, clearSedTrue, dellist, changeAllSed } = this.context
    return (
      <div>
        {/* 账目列表 单元格 用户列表 */}
        <div className='homelist'>
          {
            accountlist.map(item => {
              return <Cell
                center
                key={item.id}
                title={item.title}
                label={item.bz}
                icon={<Checkbox checked={item.sed} onChange={() => { changeSed(item.id) }} />}
                value={<>
                  <p onClick={() => {
                    dellist(item.id)
                  }}>删除</p>
                  <Typography.Text type={item.type ? 'primary' : 'danger'}>
                    {item.type ? '+' : '-'}{item.total}
                  </Typography.Text>
                </>}
              />
            })
          }
        </div>
        {/* 添加图标 */}
        <div style={{ textAlign: 'center', margin: '10px 0' }}>
          <Add color='blue' style={{ fontSize: '80px' }} onClick={() => {
            //跳转到添加到页面
            this.props.history.push('/add')
          }} />
        </div>
        {/* 总收入 总支出 结余   删除icon */}
        <div>
          <Flex justify='center' align='center' style={{ textAlign: 'center' }}>
            <Flex.Item span={12}>
              <Typography.Text >总收入:{this.srT}</Typography.Text><br />
              <Typography.Text >总支出:{this.zcT}</Typography.Text><br />
              <Typography.Text type='success'>结余:{this.srT - this.zcT}</Typography.Text>
            </Flex.Item>
            <Flex.Item span={12}>
              <span onClick={() => {
                Dialog.confirm({
                  title: '提示',
                  message: '确定删除吗',
                  onCancel: () => console.log('cancel'),
                  //执行清除已完成
                  onConfirm: () => { clearSedTrue() },
                }).catch(err => { })
              }}><DeleteO style={{ fontSize: '40px' }} /></span>
            </Flex.Item>
          </Flex>
        </div>
        {/* 全选反选 */}
        <SubmitBar
          price={this.total * 100}
          buttonText="提交订单"
          buttonColor='green'
          style={{ '--rv-submit-bar-price-color': 'green' }}
        >
          <Checkbox checked={this.All} onChange={(c) => {
            //反选的方法 
            changeAllSed(c)
          }} >全选</Checkbox>
        </SubmitBar>
      </div>
    )
  }
}
